<script setup name="user">
import { ref, onMounted } from 'vue'
import { getPayMessage } from '@/request/api'
import { useRoute } from 'vue-router'
import { MoneyFormatting } from '@/utils/tools'
import { pay } from '@/utils/wechat'
const route = useRoute()
const checked = ref(1)
const time = ref()
const { orderNo } = route.params
const list = ref({})
const PayMessage = async () => {
  const { data } = await getPayMessage({ orderNo })
  list.value = data
  time.value = data.payRemainTime
}
onMounted(() => {
  PayMessage()
})
const onGoDef = () => {
  console.log('倒计时结束返回订单列表')
}
const onSubmit = () => {
  console.log('立即支付')
  pay({ orderNo, payType: checked.value, callback: '/order' })
}
</script>
<template>
  <div class="v-wait">
    <p class="v-wait-title"><van-icon name="clock-o" />&nbsp;等待付款</p>
    <van-count-down :time="time" @finish="onGoDef">
      <template #default="timeData">
        <p>
          <span class="colon">请于</span>
          <span class="block">{{
            timeData.minutes < 10 ? '0' + timeData.minutes : timeData.minutes
          }}</span>
          <span class="colon">分</span>
          <span class="block">{{
            timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds
          }}</span>
          <span class="colon">秒</span>
          <span class="colon">内完成咨询费用的支付</span>
        </p>
        <p class="colon">逾期未支付订单自动取消</p>
      </template>
    </van-count-down>
  </div>
  <van-cell-group inset>
    <div class="v-group-title">费用信息</div>
    <van-cell
      center
      :title="key"
      :value="MoneyFormatting(item)"
      v-for="(item, key, index) in list.orderAmountDetail"
      :key="index"
    />
    <van-cell
      center
      title="费用总计"
      :value="MoneyFormatting(list.orderAmount)"
    />
  </van-cell-group>
  <van-cell-group inset>
    <div class="v-group-title">支付方式</div>
    <van-radio-group v-model="checked">
      <van-cell center title="微信" clickable @click="checked = 1">
        <template #icon>
          <van-icon
            name="https://oss.dingdongdr.com/static/user/weixin.png"
            size="1.6em"
          />&nbsp;&nbsp;
        </template>
        <template #right-icon>
          <van-radio :name="1" />
        </template>
      </van-cell>
      <van-cell center title="支付宝" clickable @click="checked = 2">
        <template #icon>
          <van-icon
            name="https://oss.dingdongdr.com/static/user/zhifubao.png"
            size="1.6em"
          />&nbsp;&nbsp;
        </template>
        <template #right-icon>
          <van-radio :name="2" />
        </template>
      </van-cell>
    </van-radio-group>
  </van-cell-group>
  <bottom-button text="立即支付" @submit="onSubmit" />
</template>

<style lang="scss" scoped>
.v-wait {
  padding: 26px 0 14px;
  text-align: center;
  .van-icon {
    font-weight: 600;
  }
  .v-wait-title {
    font-size: 20px;
    color: #357efe;
    font-weight: 500;
    line-height: 30px;
  }
  p {
    font-size: 14px;
    color: #4b4e57;
    line-height: 20px;
  }
  .block {
    color: #357efe;
  }
}
.v-group-title {
  padding: 20px 13px 5px;
  font-size: 16px;
  color: #212532;
}
.van-cell {
  padding: 10px 13px;
  font-size: 15px;
  color: #4b4e57;
  line-height: 30px;
  &:deep(.van-cell__value) {
    color: #fc3f34;
    span {
      font-size: 18px;
      &::before {
        content: '¥';
        font-size: 13px;
        margin-right: 4px;
      }
    }
  }
}

.v-wrapper {
  margin: 16px 10px;
  padding: 0 0 10px 0;
  border: 1px solid #eeeeee;
  border-radius: 6px;
  overflow: hidden;
  .v-nav-wrapper-title {
    padding: 10px;
  }
}
</style>
